<template>
    <div class="list-wrap">
        <div class="drow-menu">
            <van-dropdown-menu>
                <van-dropdown-item v-model="priceType" :options="pirceOption" />
                <van-dropdown-item v-model="saleType" :options="saleOption" />
            </van-dropdown-menu>
        </div>
        <div class="list">
            <template  v-for="item in list">
                <router-link :to="{path:'/detail',query:{proid:item.proid}}">
                    <van-card :key="item.proid" :price="(item.originprice * item.discount / 10).toFixed(2)"
                        :num="item.sales"
                        :desc="item.desc" :title="item.proname" :thumb="item.img1" :origin-price="item.originprice">
                        <template #tags>
                            <van-tag plain type="primary" v-if="item.issale">秒杀</van-tag>
                            <van-tag plain type="primary" v-if="item.isrecommend">推荐</van-tag>
                        </template>
                    </van-card>
                </router-link>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute,RouterLink } from 'vue-router';
import { ref, reactive, computed,watch } from "vue";
import { onMounted } from "vue";

import { getCategoryBrandProListAPI } from "@/api/product"
import {showFailToast} from "vant";

const route = useRoute();
// let query = route.query;
// console.log(111, query);

const queryData = reactive(route.query);  // 路由参数
const pageData = reactive({  // 分页
    count: 1,
    limitNum: 10,
})


const listParams = computed(() => {
    return { ...queryData, ...pageData };
})

console.log(222, listParams);

const list = ref<any>(null);

const priceType = ref(0);
const pirceOption = ref([
    { text: '价格升序', value: 0 },
    { text: '价格降序', value: 1 },
])

const  saleType= ref(0);
const saleOption = ref([
    { text: '销量升序', value: 0 },
    { text: '销量降序', value: 1 },
])

const sortPriceData = ()=>{
    if(priceType.value == 0){
        list.value.sort((a:any,b:any)=> (a.originprice * a.discount / 10) - (b.originprice * b.discount / 10));
    }else{
        list.value.sort((a:any,b:any)=> (b.originprice * b.discount / 10) - (a.originprice * a.discount / 10));
    }
}

const sortSaleData = ()=>{
    if(saleType.value == 0){
        list.value.sort((a:any,b:any)=> a.sales - b.sales);
    }else{
        list.value.sort((a:any,b:any)=> b.sales - a.sales);
    }
}


const getCategoryBrandProList = async () => {
    try {
        let result = await getCategoryBrandProListAPI(listParams.value);
        console.log("请求成功", result);
        list.value = result.data;
        sortPriceData();


    } catch (err: any) {
        showFailToast(err.message);
    }
}

watch(priceType,()=>{
    sortPriceData();
})

watch(saleType,()=>{
    sortSaleData();
})


onMounted(async () => {
    await getCategoryBrandProList();
})














</script>

<style scoped></style>